<template>
    <div class="user-page">
    <div class="main">
         <van-cell-group>
            <van-field
                v-model="form.name"
                label="姓名"
                placeholder="请输入姓名"
            />
            <van-field
                v-model="form.sex"
                label="性别"
                disabled
                placeholder="请选择性别"
                @click.native="seleSex()"
            />
            <van-field
                v-model="form.education "
                label="学历"
                placeholder="请输入学历"
            />
            <van-field
                v-model="form.phone"
                label="电话"
                placeholder="请输入电话"
            />
            <van-field
                v-model="form.email"
                label="邮箱"
                placeholder="请输入邮箱"
            />
        </van-cell-group>   

        <van-cell-group class="group-cell">
            <van-field
                v-model="form.selfIntroduction"
                label="个人介绍"
                type="textarea"
                placeholder="请输入留言"
                autosize/>
        </van-cell-group>

        <van-cell-group class="group-cell">
            <van-field
                v-model="form.project"
                label="项目"
                type="textarea"
                placeholder="请输入留言"
                autosize/>
        </van-cell-group>

        <van-dialog v-model="dialogShow">
            <van-radio-group v-model="radio" class="text-center radio-group">
                <van-radio name="1" class="radio-item"  >男</van-radio>
                <van-radio name="2" class="radio-item"  >女</van-radio>
            </van-radio-group>
        </van-dialog>
        <div class="text-center">
            <van-button size="normal" class="sub-btn" @click.native="subBtn">确认修改</van-button>
        </div>
       


    </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import * as api from'./../../api/api.js';


export default {
    name:'userPage',
    data(){
        return {
            form:{
                name:'',
                sex:'',
                education:'',
                phone:'',
                email:'',
                selfIntroduction:'',
                project:'',
                openId:sessionStorage.getItem('wxInfo'),
                // openId:'o_2t6wd_R1vLGmFncSKoiKH4ADsI'   
            },
            radio:1,
            dialogShow: false,
        }
    },
    watch:{
        radio(a,b){
            if(a==1){
                this.form.sex='男'
            }else if(a==2){
                this.form.sex='女'
            }
        },
    },
    methods:{
        seleSex(){
            this.dialogShow=true;
        },
        fetchUser(){
            let vm = this;
            let body={
                openId:sessionStorage.getItem('wxInfo'),
                // openId:'o_2t6wd_R1vLGmFncSKoiKH4ADsI'
            }
            api.getUserInfo(body).then(res=>{
                vm.form.name=res.data.data.name;
                vm.form.education=res.data.data.education;
                vm.form.phone=res.data.data.phone;
                vm.form.email=res.data.data.email;
                vm.form.selfIntroduction=res.data.data.selfIntroduction;
                vm.form.project=res.data.data.project;
                vm.radio=res.data.data.sex;
                if(res.data.data.sex==1){
                    vm.form.sex='男'
                }else if(res.data.data.sex==2){
                    vm.form.sex='女'
                }
            })
        },
        subBtn(){
            let vm = this;
            let body=vm.form;
            if(body.sex=='男'){
                body.sex=1;
            }else if(body.sex=='女'){
                body.sex=2;    
            }
            api.updateUser(body).then(res=>{
                if(res.data.code==200){
                    Dialog.alert({
                        title: '提示',
                        message: res.data.msg
                    })
                    vm.form.name=res.data.data.name;
                    vm.form.education=res.data.data.education;
                    vm.form.phone=res.data.data.phone;
                    vm.form.email=res.data.data.email;
                    vm.form.selfIntroduction=res.data.data.selfIntroduction;
                    vm.form.project=res.data.data.project;
                    if(res.data.data.sex==1){
                        vm.form.sex='男'
                    }else if(res.data.data.sex==2){
                        vm.form.sex='女'
                    }
                }else{
                    Dialog.alert({
                        title: '提示',
                        message: res.data.msg
                    })
                }
                
            })
        }
    },
    mounted(){
        this.fetchUser();
        document.title='完善个人信息'
    },
}
</script>


<style scoped lang="scss">
.user-page{
    .main{
        padding-top:.266667rem;
        .info{
            margin-top:.266667rem;
            .text-detail{
                padding:.4rem;
                color:#666;
            }
        }
        .radio-group{
            display:flex;
            padding:.533333rem .266667rem;
            .radio-item{
                flex:1; 
            }
        }
        .group-cell{
            margin-top:.266667rem;
        }
    }
.sub-btn{
    margin-top:.4rem;
    width:80%;
    
}
}
</style>
